---
slug: reactHightLevelComp
title: react高阶组件
authors: []
tags: [react]
---
> 利用js的闭包(柯里化函数)实现的组件代理

> 本质是为了解决类组件在逻辑复用上的局限性而出现的一种妥协式方案

**react-jss就只能在函数式组件中使用,类组件要想使用的话就得用高阶组件(HOC)**

> 从hooks组件诞生后hoc就已经不太用了

### 本质

> 本质就是用函数返回组件

```jsx
import React, {useContext} from 'react';
import {createUseStyles} from 'react-jss';
const useStyle  = createUseStyles({
    title:{
        background:'lightblue',
        '&:hover':{
            color:'gold',
        }
    },
    list:{
        background:'blanchedalmond',
        '& a':{
            color:'red',
            '&:hover':{
                color:'lightblue'
            }
        }
    },
    content:{
        background:'gray',
    }
})
class ReactHocClazz extends React.Component {
    render(){
        const {title, list,content} = this.props;
        return (
            <>
                <div className={title}>
                    链接标题
                </div>
                <div className={list}>
                    <a href={'http://localhost:8080/'}>
                        hello world
                    </a>
                </div>
                <div className={content}>
                    content
                </div>
            </>
        )
    }
}

 const ReactHocClazzProxy = function (Component) {
    return function HOC(){
        const sty = useStyle();
        return (
            <Component {...sty}/>
        )
    }

};

export default ReactHocClazzProxy(ReactHocClazz);



```